import React, { Suspense, useRef } from "react";
import { Navigate, Route, Routes, useLocation } from "react-router-dom";
import {
  CSSTransition,
  TransitionGroup,
  SwitchTransition,
} from "react-transition-group";
import { MenuItem } from "./typing";
import "./router.css";

const Home = React.lazy(() => import("@/pages/home"));
const HomeDemo = React.lazy(() => import("@/pages/home/Demo"));
const HomeTest = React.lazy(() => import("@/pages/home/Test"));
const LoginPage = React.lazy(() => import("@/pages/Login"));

const routerList: MenuItem[] = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    element: Home,
    children: [
      {
        path: "/home",
        redirect: "/home/demo",
      },
      {
        path: "/home/demo",
        element: HomeDemo,
      },
      {
        path: "/home/test",
        element: HomeTest,
      },
    ],
  },
  {
    path: "/login",
    element: LoginPage,
  },
  // {
  //   path: '*',
  //   element: <NotFoundPage />,
  // },
];

const RouterTree = (RouterArr: MenuItem[]): React.ReactNode => {
  return (
    RouterArr &&
    RouterArr.map((item) => {
      const { element: Component, path, redirect } = item;
      if (item.children === undefined) {
        if (redirect !== undefined) {
          return (
            <Route
              path={path}
              element={<Navigate to={redirect} replace />}
              key={path}
            />
          );
        } else {
          return <Route path={path} element={<Component />} key={path} />;
        }
      } else {
        return (
          <Route path={path} element={<Component />} key={path}>
            {RouterTree(item.children)}
          </Route>
        );
      }
    })
  );
};

export default (props: any) => {
  const location = useLocation();
  const nodeRef = useRef(null);

  return (
    // <Suspense fallback={<div>加载中...</div>}>
    <Routes>
      {/* <Route
                path={"/"}
                key={"/"}
                element={<Navigate to="/home" replace={true} />}
              />
              <Route path={"/home"} key={"/home"} Component={Home}>
                <Route
                  path={"/home"}
                  key={"/home/indexs"}
                  element={<Navigate to="/home/demo" replace={true} />}
                />
                <Route
                  path={"/home/demo"}
                  key={"/home/demo"}
                  Component={HomeDemo}
                />
              </Route>
              <Route path={"/login"} key={"/login"} Component={LoginPage} /> */}
      {RouterTree(routerList)}
    </Routes>
    // </Suspense>
  );
};
